<script src="@/js/current/footer.js"></script>

<template>

  <div id="app">

    <!-- 页脚 -->
    <div class="footer">

      <!-- 站内弹窗链接 -->
      <div class="link">
        <a @click="guanyu = true">关于本站</a>
        <el-divider direction="vertical" />
        <a @click="yinsi = true">隐私保护</a>
        <el-divider direction="vertical" />
        <a @click="mianze = true">免责声明</a>
        <el-divider direction="vertical" />
        <a @click="lianxi = true">联系本站</a>
      </div>

      <!-- 标识 -->
      <div class="mark">
        Copyright © 2024 All Rights Reserved
        <!-- 备案号 -->
        <a class="bei" target="_blank" href="https://beian.miit.gov.cn">
          网站备案号
        </a>
      </div>

    </div>

    <!-- 弹窗 -->
    <div class="dialog">

      <!-- 关于本站 -->
      <Modal scrollable="ture" v-model="guanyu" class="guanyu" :styles="{ top: '60px', minWidth: '550px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="ios-disc" />
            关于本站
          </b>
        </template>

        <div>
          <p>
            关于本站
          </p>
        </div>

        <template #footer>
          <div style="font-size:13px; text-align:center;">
            <b>{{ date }}</b>
          </div>
        </template>
      </Modal>

      <!-- 隐私保护 -->
      <Modal scrollable="ture" v-model="yinsi" class="yinsi" :styles="{ top: '60px', minWidth: '550px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="ios-disc" />
            隐私保护
          </b>
        </template>

        <div>
          <p>
            隐私保护
          </p>
        </div>

        <template #footer>
          <div style="font-size:13px; text-align:center;">
            <b>{{ date }}</b>
          </div>
        </template>
      </Modal>

      <!-- 免责声明 -->
      <Modal scrollable="ture" v-model="mianze" class="yinsi" :styles="{ top: '60px', minWidth: '550px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="ios-disc" />
            免责声明
          </b>
        </template>

        <div>
          <p>
            免责声明
          </p>
        </div>

        <template #footer>
          <div style="font-size:13px; text-align:center;">
            <b>{{ date }}</b>
          </div>
        </template>
      </Modal>

      <!-- 联系本站 -->
      <Modal scrollable="ture" v-model="lianxi" class="yinsi" :styles="{ top: '60px', minWidth: '550px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="ios-disc" />
            联系本站
          </b>
        </template>

        <div style="height:150px;">
          <div style="float:left;">
            <!-- 请替换QQ二维码 -->
            <!-- <img src="@/assets/pic/current/qqmp.png"
              style="width:100px; box-shadow:1px 1px 20px 2px rgb(226, 226, 226); margin-left:40px;" /> -->
            <br />
            <span style="margin-left:58px;">
              QQ扫一扫
            </span>
          </div>
          <div style="float:right;">
            <!-- 请替换微信二维码 -->
            <!-- <img src="@/assets/pic/current/wxmp.png"
              style="width:100px; box-shadow:1px 1px 20px 2px rgb(226, 226, 226); margin-right:40px;" /> -->
            <br />
            <span style="margin-left:13px;">
              微信扫一扫
            </span>
          </div>
        </div>

        <template #footer>
          <div style="font-size:13px; text-align:center;">
            <b>{{ date }}</b>
          </div>
        </template>
      </Modal>

    </div>

  </div>

</template>

<style scoped lang="less" src="@/css/current/footer.scss"></style>
